<template>
  <div class="rank-bg">
    <div class="rank-star"></div>
    <blink-star
      :stars="[
        { left: '0.5rem', top: '0.8rem', type: '--yellow-square' },
        { right: '0.5rem', top: '0.8rem', type: '--yellow-square' },
        { left: '2.5rem', top: '0.4rem', type: '--yellow-square' },
        { left: '4.5rem', top: '0.5rem', type: '--cyan' },
        { left: '3.5rem', top: '1.8rem', type: '--yellow-bling' },
        { left: '3.8rem', top: '3.2rem', type: '--yellow-bling' },
      ]"
    />
    <shooting-star />
    <download-bar v-if="!isHeyHey" />
    <div class="container">
      <auto-height-block
        class="auto-height-warp"
        :top-bg="topBg"
        :middle-bg="middleBg"
        :bottom-bg="bottomBg"
      >
        <div class="explain" @click="gotoExplain"></div>
        <div class="btn-frind-wish" @click="gotofriendwish"></div>
        <div class="rank-top_title"></div>
        <div class="rank-inform">
          <div class="rank-trumpet"></div>
          <span>{{ countdown }}</span>
        </div>
        <div class="rank-title"></div>
        <div class="rank-userinfocontainer">
          <div
            v-for="(item, index) in alllist"
            :key="index"
            :class="`rank-userinfo rank-userinfo--${Number(index) + 1}`"
            @click="postOthersInfo(item)"
          >
            <div :class="`rank-usernum`" :style="rankNumStyle(index)"></div>
            <div :class="`rank-userwish`">
              <div class="rank-userwishname">{{ item.nick_name }}的愿望</div>
            </div>
            <div :class="`rank-userlove`">
              <div class="icon-love"></div>
              <div :class="`rank-userlovenum`">
                <span>{{ item.wish_like_num }}</span>
              </div>
            </div>
            <div :class="`rank-userprofile`">
              <img style="border-radius: 50%" :src="item.icon" alt="">
            </div>
            <div :class="`rank-userwishtext`">
              <div class="rank-userwishtextname">{{ item.wish_name }}</div>
            </div>
            <div class="rank-turn"></div>
          </div>
        </div>
        <div class="rank-bottomcontainer">
          <template v-if="loginStore.isLogin">
            <div class="rank-bottomcontainer_profilephoto">
              <img :src="rankInfo.icon">
            </div>
            <div class="rank-bottomcontainer_ranking">
              <span
                class="rank-info"
              >
                我的排名：{{ rankInfo.ranking || "目前暂无排名" }}
              </span>
              <br>
              <div class="rank-bottomcontainer_ranking_bottom">
                <div class="rank-bottomcontainer_love"></div>
                <span>{{ rankInfo.wish_like_num }}</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="no-login-text">查看看我的愿望，请先登录哦～</div>
          </template>
          <div v-if="loginStore.isLogin" class="rank-btn" @click="gotoMyWish">
            查看
          </div>
          <div v-else class="rank-btn" @click="doLogin">
            登录
          </div>
        </div>
      </auto-height-block>
    </div>
    <van-action-sheet v-model:show="isShowInstruction" class="instructions">
      <rank-instruction />
    </van-action-sheet>
  </div>
</template>

<script>
import { useLoginStore } from '@/lib/js/hooks'
import { useCountdown } from '@/lib/js/hooks'
import topBg from './images/rank/bg-rank-top.png'
import middleBg from './images/rank/bg-rank-repeat.png'
import bottomBg from './images/rank/bg-rank-bottom.png'
import RankInstruction from '../components/rank-instruction.vue'

import { createLogin } from '@/lib/components/Login'
export default {
  components: {
    RankInstruction
  },
  setup () {
    const loginStore = useLoginStore()
    const [countdown, setCountdown] = useCountdown()
    return {
      countdown,
      setCountdown,
      loginStore
    }
  },
  data () {
    return {
      alllist: [],
      rankInfo: {

      },
      topBg,
      middleBg,
      bottomBg,
      currentUserHeyId: '',
      isHeyHey: window.isHeyHeyTalk(),
      isShowInstruction: false
    }
  },
  watch: {
    'loginStore.isInitial': {
      handler (value) {
        this.$nextTick(() => {
          if (value) {
            if (this.loginStore.isLogin) {
              this.getMyRank()
            }
          }
        })
      },
      immediate: true
    }
  },
  created () {
    this.getAlllist()
  },
  methods: {
    rankNumStyle (index) {
      return {
        backgroundImage: `url(${process.env.PUBLIC_PATH}/static/images/timetravel/rank/${(index + 1)}.png)`
      }
    },
    async getMyRank () {
      const res = await this.$api.Alllist.getMyRank()
      const { code }  = res
      if(code === 200){
        const { data: { result: { myself_rank_info: myRankInfo } } } = res
        this.rankInfo = myRankInfo
        this.currentUserHeyId = this.rankInfo.hey_id
      }else if(code === 401){
        this.loginStore.isLogin = false
      }
      //const { result: { myself_rank_info } } = res
    },

    async getAlllist () {
      const res = await this.$api.Alllist.getAlllist()
      const { result: { ended_at: endedAt, server_time: now, started_at: startedAt, total_rank_list: alllist } } = res
      this.alllist = [
        ...alllist
      ]
      this.setCountdown(startedAt * 1000, endedAt * 1000, now * 1000, {})
      console.log(this.alllist)
    },
    // gotoOtherwish () {
    //   this.$router.push('./otherwish')
    // }
    async postOthersInfo (data) {
      const { hey_id } = data
      const ids = data.hey_id
      this.$router.push({ name: 'otherwish', query: { heyId: hey_id, currentUserHeyId: this.currentUserHeyId } })
    },
    gotofriendwish () {
      this.$router.replace({ name: 'friendwish' })
    },
    gotoExplain () {
      this.isShowInstruction = true
      //this.$router.replace({ name: 'explain' })
    },
    gotoMyWish () {
      this.$router.push({ name: 'mywish' })
    },
    doLogin() {
      createLogin(() => {
        this.loginStore.isLogin = true
        this.getMyRank()
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.instructions{
  background-color: #000;
}
.rank-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./images/rank/bg.jpg") no-repeat, url("./images/rank/bg-mini.jpg") no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
}

.rank-star {
  position: absolute;
  top: 0;
  left: 2%;
  width: 2.25rem;
  height: 1.17rem;
  background-image: url("./images/I_star.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 3s infinite;
  @keyframes star1 {
    50% {
      top: -3%;
    }
    100% {
      top: 0%;
    }
  }
}

.container {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 2rem;
  width: 100%;
  .auto-height-warp {
    height: 100%;
    width: 100%;
    padding-top: 2.64rem;
    ::v-deep .auto-height-block__line-bg {
      top: 5.26rem;
      bottom: 6.55rem;
    }
  }

  .explain {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background-image: url("./images/rank/explain.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .btn-frind-wish {
    position: absolute;
    width: 1.58rem;
    height: 0.69rem;
    right: -0.1rem;
    top: 1.9rem;
    transform: rotate(7deg);
    background-image: url("./images/rank/friendwish.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .rank-top_title {
    position: absolute;
    top: 1rem;
    left: 50%;
    margin-left: -1.33rem;
    width: 2.66rem;
    height: 0.39rem;
    background-image: url("./images/rank/toptitle.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .rank-userinfocontainer {
    position: absolute;
    left: 50%;
    margin-left: -2.82rem;
    width: 5.64rem;
    overflow-y: auto;
    overflow-x: hidden;
    top: 3.5rem;
    bottom: 1rem;
    padding-bottom: 1.1rem;
    .rank-userinfo {
      position: relative;
      width: 100%;
      height: 1.96rem;
      background-image: url("./images/rank/firstcontainer.png");
      background-size: 100% auto;
      .rank-usernum {
        position: absolute;
        top: 9%;
        left: 5%;
        width: 0.67rem;
        height: 1.3rem;
        background-size: 100% auto;
      }
      .rank-userwish {
        position: absolute;
        top: 15%;
        left: 20%;
        width: 2.81rem;
        height: 0.31rem;
        font-size: 12px;
        color: #fff;
        .rank-userwishname {
          @include ellipsis();
        }
      }
      .rank-userlove {
        position: absolute;
        top: 15%;
        left: 70%;
        width: 1.53rem;
        height: 0.31rem;
        .icon-love {
          position: absolute;
          top: 10%;
          left: 0;
          width: 0.26rem;
          height: 0.26rem;
          background-image: url("./images/rank/love.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
        }
        .rank-userlovenum {
          line-height: 0.28rem;
          margin-left: 0.3rem;
          width: 100%;
          height: 100%;
          font-size: 14px;
          color: #fff;
        }
      }
      .rank-userprofile {
        position: absolute;
        top: 35%;
        left: 20%;
        width: 0.9rem;
        height: 0.9rem;
        background-image: url("./images/rank/profilephoto.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
      .rank-userwishtext {
        position: absolute;
        top: 35%;
        left: 36%;
        width: 3rem;
        height: 1rem;
        background-image: url("./images/rank/input.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        .rank-userwishtextname {
          scrollbar-width: none;
          overflow-y: scroll;
          font-size: 12px;
          color: #fff;
          position: absolute;
          top: 17%;
          left: 12%;
          width: 2.5rem;
          height: 0.62rem;
        }
      }
      .rank-turn {
        position: absolute;
        top: 45%;
        left: 92%;
        width: 0.19rem;
        height: 0.36rem;
        background-image: url("./images/rank/turn.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
    }
  }
  .rank-inform {
    position: relative;
    margin: 0 auto;
    width: 6rem;
    height: 0.35rem;
    font-size: 12px;
    color: #c2a8fd;
    display: flex;
    align-items: center;
    justify-content: center;
    .rank-trumpet {
      width: 0.27rem;
      height: 0.23rem;
      margin-right: 0.1rem;
      background-image: url("./images/rank/trumpet.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }
  .rank-title {
    margin: 0 auto;
    width: 4.25rem;
    height: 0.45rem;
    background-image: url("./images/rank/title.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.24rem;
  }

  .rank-bottomcontainer {
    position: absolute;
    left: 9%;
    bottom: 0.55rem;
    width: 6.14rem;
    height: 1.06rem;
    background-image: url("./images/rank/bottomcontainer.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    .rank-bottomcontainer_profilephoto {
      position: absolute;
      top: 13%;
      left: 7.5%;
      width: 0.86rem;
      height: 0.86rem;
      background-image: url("./images/rank/profilephoto.png");
      background-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 85%;
        max-height: 85%;
        border-radius: 100%;
      }
    }
    .rank-bottomcontainer_ranking {
      position: absolute;
      top: 18%;
      left: 25%;
      font-size: 0.28rem;
      width: 3.22rem;
      height: 0.7rem;
      color: #442e90;
      .rank-bottomcontainer_ranking_bottom {
        height: 0.26rem;
        line-height: 0.26rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .rank-bottomcontainer_love {
          width: 0.29rem;
          height: 0.26rem;
          margin-right: 0.1rem;
          background-image: url("./images/rank/love.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
        }
      }
    }
    .no-login-text{
       font-size: 0.3rem;
       color: #442e90;
       text-align: center;
       width: 4.6rem;
       height: 1.06rem;
       padding-top: 0.2rem;
    }
    .rank-btn {
      position: absolute;
      text-align: center;
      top: 0.15rem;
      right: 0.3rem;
      width: 1.09rem;
      height: 0.58rem;
      line-height: 0.58rem;
      color: #fff;
      font-size: 0.3rem;
      background-image: url("./images/rank/bg-bottom-btn.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }
}
</style>
